/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div id="intersection-stages" class="intersection-stages" :style="stageStyle">
    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{'当前阶段'}}:</div> -->
      <div style="margin-left: 10PX;" >
        <div style="width: 100%; height: auto;">
          <div class="control-model" v-for="(item, index) in stagesList" :key="index">
            <div style="position:relative;" :style="singleStyle" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
              <!-- <template v-for="(side, index) in item[0].sidewalkPhaseData" >
                <PatternWalkSvg class="patternWalk"
                                v-if="item[0].peddirection.includes(side.id)"
                                :key="side.key + '-' + index"
                                :Data="side"
                                :Width="'55'"
                                :Height="'55'" />
              </template> -->
                <!-- <patternwalksvg class="patternWalk"
                          :showWalk="item[0].peddirection"
                          :Width="'40'"
                          :Height="'40'" /> -->
              <xdr-dir-selector Width="75PX" Height="75PX" Widths="65px" Heights="65px" :Data="showStyle" :Datas="showStyles" :showlist="item"></xdr-dir-selector>
              <div style="height:65px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
                <div class="current-stage-num" style="width:20%;">{{index + 1}}</div>
                <div style="width:70%;">
                  <i class="iconfont icon-feijidongche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
                  <i class="iconfont icon-lukouzhilu" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
                  <i class="iconfont icon-BRT" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
                  <div style="transform:scale(0.65);margin-left:10PX">
                    <i class="iconfont icon-xuxiangwei-xin" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
                  </div>
                  <i class="iconfont icon-gongjiaoche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
                  <i class="iconfont icon-youguidianche" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
                  <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
/* eslint-disable */
import RingDataModel from '../../../utils/RingDataModel.js'
// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
export default {
  name: 'Stages',
  components: {
    // patternwalksvg
  },
  props: {
    isShowCurrentStage: {
      type: Boolean,
      default: true
    },
    crossStatusData: {
      type: Object,
      default: () => {}
    },
    phaseList: {
      type: Array,
      default: () => []
    },
    presetText: {
      type: String,
      default: '预置'
    },
    presetIndex: {
      type: Number,
      default: -1
    },
    preselectStages:{
      type: Number,
      default: -1
    },
    preselectModel:{
      type: Number,
      default: -1
    },
    presetPhaseId: {
      type: Number,
      default: -1
    },
    zoom: {
      type: Number,
      default: 1
    },
    StageWidth: {
      type: String,
      default: '70px'
    },
    StageHeight: {
      type: String,
      default: '65px'
    }
  },
  data () {
    return {
      showStyle:{
        top:'7PX',
        left:'13px'
      },
      showStyles:{
        top:'5PX',
        left:'12px'
      },
      presetStageIndex: -1,
      side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
      // stagesList: [],
      currentStage: -1,
    };
  },
  computed: {
    singleStyle () {
      return {
        width: this.StageWidth,
        height: this.StageHeight
      }
    },
    stagesList () {
      let list = []
      if (this.crossStatusData && this.crossStatusData.stages && this.phaseList && this.phaseList.length > 0) {
        let ringDataModel = new RingDataModel(this.crossStatusData, this.phaseList)
        list = ringDataModel.getStageData()
        if (this.isShowCurrentStage) {
          this.currentStage = this.crossStatusData.current_stage
        }
      }
      console.log(list,'list')
      console.log(this.phaseList,'this.phaseList')
      return list
    },
    stageStyle () {
      return {
        zoom: this.zoom
      }
    }
  },
  watch: {
    preselectStages: { 
      handler: function (val, oldVal) {
        if(this.preselectStages === -1 && this.preselectModel !== -1) {
          this.currentStage = -1
        }
      },
      // 深度观察监听
      deep: true
    },
    preselectModel: { 
      handler: function (val, oldVal) {
        if(this.preselectStages === -1 && this.preselectModel !== -1) {
          this.currentStage = -1
        }
      },
      // 深度观察监听
      deep: true
    },
    stagesList: {
      handler: function (val, oldVal) {
        if (this.presetPhaseId > -1) {
          this.presetStageIndex = this.getComputedPresetIndex()
        } else {
          this.presetStageIndex = this.presetIndex
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    getComputedPresetIndex() {
      let res = -1
      for (let i = 0; i < this.stagesList.length; i++) {
        let stage = this.stagesList[i]
        for (let phase of stage) {
          let phaseId = phase.id
          if (phaseId === this.presetPhaseId) {
            res = i
            break
          }
        }
        if (res > -1) {
          res = res + 1
          break
        }
      }
      return res
    },
    selectStages (value) {
      if (this.isShowCurrentStage) {
        return false
      }
      this.currentStage = value
      this.$emit('onSelectStages', value)
    }
  },
  mounted () {
  }
};
</script>
